  import 'package:flutter/material.dart';
  import 'package:flutter_screenutil/flutter_screenutil.dart';
  import 'package:get/get_rx/src/rx_types/rx_types.dart';
  import 'package:mobile_vpn/common/cpn/cpn_view_state.dart';
  import 'package:mobile_vpn/common/ext/asset_ext.dart';
  import 'package:mobile_vpn/pages/payment_page/payment_logic.dart';
  import 'package:mobile_vpn/common/cpn/sliver_app_bar.dart';

  import '../../theme/color_palettes.dart';
  import '../member_page/member_page.dart';

  class PaymentPage extends CpnViewState<PaymentLogic> {
    // 支付方式选择状态
    RxString _selectedPaymentMethod = 'alipay'.obs;
    late Rx<MemberItem> _memberItem;

    @override
    Widget buildBody(BuildContext context) {

      // 初始化 _memberItem
      _memberItem = Rx<MemberItem>(ModalRoute.of(context)!.settings.arguments as MemberItem);

      return Scaffold(
        backgroundColor: ColorPalettes.instance.background,
        body: CustomScrollView(
          slivers: <Widget>[
            commonSliverAppBar(
              title: '支付订单',
            ),
            SliverList(
              delegate: SliverChildListDelegate(
                [
                  Padding(
                    padding: EdgeInsets.all(20.h),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        SizedBox(height: 30.h),
                        // 商品信息
                        Text(
                          'USD ${_memberItem.value.title}',
                          style: TextStyle(
                            fontSize: 32.sp,
                            fontWeight: FontWeight.bold,
                            color: Colors.black87,
                          ),
                        ),
                        SizedBox(height: 30.h),
                        Text(
                          'USD ${_memberItem.value.price}',
                          style: TextStyle(
                            fontSize: 38.sp,
                            color: Colors.pink,
                          ),
                        ),
                        SizedBox(height: 30.h),
                        // 支付方式选择
                        Column(
                          children: [
                            // 支付宝选项
                            GestureDetector(
                              onTap: () {
                                _selectedPaymentMethod.value = 'alipay';
                              },
                              child: Card(
                                elevation: 2,
                                color: Color(0xFFFFFFFF),
                                shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.zero,  // 移除圆角
                                ),

                                margin: EdgeInsets.zero,  // 移除 Card 的默认外边距
                                child: Padding(
                                  padding: EdgeInsets.all(20.h),
                                  child: Row(
                                    children: [
                                      // 左侧：图片和文字
                                      Expanded(
                                        child: Row(
                                          children: [
                                            Image(
                                              image: AssetImage("alipaypayment".png),
                                              width: 50.w,
                                              height: 50.h,
                                            ),
                                            SizedBox(width: 10.w),
                                            Text(
                                              '支付宝',
                                              style: TextStyle(
                                                fontSize: 30.sp,
                                                fontWeight: FontWeight.bold,
                                              ),
                                            ),
                                          ],
                                        ),
                                      ),
                                      // 右侧：选择按钮
                                      Radio(
                                        value: 'alipay',
                                        groupValue: _selectedPaymentMethod.value,
                                        onChanged: (value) {
                                          _selectedPaymentMethod.value = value.toString();
                                        },
                                        activeColor: Colors.red,
                                      ),
                                    ],
                                  ),
                                ),
                              ),
                            ),
                            // 微信支付选项
                            GestureDetector(
                              onTap: () {
                                _selectedPaymentMethod.value = 'wechat';
                              },
                              child: Card(
                                elevation: 2,
                                color: Color(0xFFFFFFFF),
                                shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.zero,  // 移除圆角

                                ),
                                margin: EdgeInsets.zero,  // 移除 Card 的默认外边距
                                child: Padding(
                                  padding: EdgeInsets.all(20.h),
                                  child: Row(
                                    children: [
                                      // 左侧：图片和文字
                                      Expanded(
                                        child: Row(
                                          children: [
                                            Image(
                                              image: AssetImage("wechatpay".png),
                                              width: 50.w,
                                              height: 50.h,
                                            ),
                                            SizedBox(width: 10.w),
                                            Text(
                                              '微信支付',
                                              style: TextStyle(
                                                fontSize: 30.sp,
                                                fontWeight: FontWeight.bold,
                                              ),
                                            ),
                                          ],
                                        ),
                                      ),
                                      // 右侧：选择按钮
                                      Radio(
                                        value: 'wechat',
                                        groupValue: _selectedPaymentMethod.value,
                                        onChanged: (value) {
                                          _selectedPaymentMethod.value = value.toString();
                                        },
                                        activeColor: Colors.red,
                                      ),
                                    ],
                                  ),
                                ),
                              ),
                            ),
                          ],
                        ),
                        SizedBox(height: 40.h),
                        // 支付按钮
                        ElevatedButton(
                          onPressed: () {
                            _handlePayment(context);
                          },
                          style: ElevatedButton.styleFrom(
                            backgroundColor: Colors.blue,
                            minimumSize: Size(600.w, 80.h),
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(10.h),
                            ),
                            elevation: 3,
                          ),
                          child: Text(
                            '付款',
                            style: TextStyle(
                              fontSize: 30.sp,
                              color: Colors.white,
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      );
    }

    // 处理支付逻辑
    void _handlePayment(BuildContext context) {
      if (_selectedPaymentMethod.value == 'alipay') {
        _payWithAlipay(context);
      } else if (_selectedPaymentMethod.value == 'wechat') {
        _payWithWeChat(context);
      }
    }

    // 模拟支付宝支付
    void _payWithAlipay(BuildContext context) {
      print('正在使用支付宝支付...');
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Text('支付宝支付成功！'),
          duration: Duration(seconds: 2),
        ),
      );
    }

    // 模拟微信支付
    void _payWithWeChat(BuildContext context) {
      print('正在使用微信支付...');
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Text('微信支付成功！'),
          duration: Duration(seconds: 2),
        ),
      );
    }
  }
